<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header" class="header"><span>活动管理</span></div>
      <div class="box-2">
        <img :src="imageUrl+info['picture']" class="image">
        <div class="content">
          <div class="name">{{ info['name'] }}</div>
          <div class="tab">
            <el-tag v-if="info['activity_status']===0" type="danger">{{ info.statusText }}</el-tag>
            <el-tag v-if="info['activity_status']===1" type="primary">{{ info.statusText }}</el-tag>
            <el-tag v-if="info['activity_status']===2" type="warning">{{ info.statusText }}</el-tag>
            <el-tag v-if="info['activity_status']===3" type="success">{{ info.statusText }}</el-tag>
            <el-tag v-if="info['activity_status']===4" type="info">{{ info.statusText }}</el-tag>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;赞: {{ info.fabulousNumber }}</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;收藏: {{ info.collectNumber }}</span>
            <!--<span>转发: </span>-->
          </div>
          <div class="info">活动地点<span>{{ info['place'] }}</span></div>
          <div class="info">活动时间<span>{{ info['start_time'] }}</span></div>
          <div class="info">截止报名<span>{{ info['stop_time'] }}</span></div>
          <div class="info">发起人&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ info['host_party'] }}</span></div>
          <div class="info">人数上限<span>{{ info['limit_number'] }}</span></div>
          <div class="info">联系方式<span>{{ info['host_contact'] }}</span></div>
          <div class="info">更新时间<span>{{ info['updated_at'] }}</span></div>
          <div class="info">已报名&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ info['number'] }}</span></div>
        </div>
      </div>
      <div class="btn-box">
        <el-button type="primary" @click="toInfo(info['id'])">详情</el-button>
        <el-button v-if="info['activity_status']===1 || info['activity_status']===2" type="danger" class="bg-green" @click="toModify">编辑活动</el-button>
        <el-button v-if="info['activity_status']!==4" type="danger" @click="dialogVisible=true">取消活动</el-button>
        <el-button type="info" @click="toExportMember">导出参加者</el-button>
      </div>
      <div class="box-3">
        <el-tabs v-model="activeName" class="activity-tabs" @tab-click="handleClick">
          <el-tab-pane label="待审核用户" name="first">
            <el-table v-loading="tableLoading" :data="tableData" border highlight-current-row @sort-change="handleSortChange">
              <el-table-column prop="id" label="ID" width="80" header-align="center" align="center" sortable />
              <el-table-column prop="avatar" label="头像" width="140" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-avatar :src="scope.row['avatar']" :size="40" shape="square" />
                </template>
              </el-table-column>
              <el-table-column prop="member_name" label="用户名" min-width="140" header-align="center" align="center" />
              <el-table-column prop="mobile" label="手机号码" min-width="160" header-align="center" align="center" />
              <el-table-column prop="status" label="状态" width="150" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row['status']===2" type="success">审核通过</el-tag>
                  <el-tag v-if="scope.row['status']===1" type="info">等待审核</el-tag>
                  <el-tag v-if="scope.row['status']===4" type="danger">不通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" header-align="center" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row['status']===1">
                    <el-tooltip content="通过" placement="top">
                      <el-button type="success" size="small" class="bg-green" icon="el-icon-check" circle @click="toSetStatus(scope.row,1)"/>
                    </el-tooltip>
                    <el-tooltip content="不通过" placement="top">
                      <el-button type="info" size="small" icon="el-icon-close" circle @click="toSetStatus(scope.row,2)"/>
                    </el-tooltip>
                  </div>
                  <!--<el-tooltip content="删除" placement="top">
                    <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDelete(scope.row)"/>
                  </el-tooltip>-->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :page-sizes="pageSizes"
              :total="total"
              class="pagination"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"/>
          </el-tab-pane>
          <el-tab-pane label="待审核评论" name="second">
            <el-table v-loading="tableLoading" :data="tableData" border highlight-current-row @sort-change="handleSortChange">
              <el-table-column prop="id" label="ID" width="80" header-align="center" align="center" sortable />
              <el-table-column prop="avatar" label="头像" width="140" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-avatar :src="scope.row['avatar']" :size="40" shape="square" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="用户名" width="140" header-align="center" align="center" />
              <!--<el-table-column prop="mobile" label="手机号码" width="160" header-align="center" align="center" />-->
              <el-table-column prop="content" label="评论内容" min-width="220" header-align="center" align="center" />
              <el-table-column label="状态" width="150" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row['status']===1" type="success">审核通过</el-tag>
                  <el-tag v-if="scope.row['status']===0" type="info">等待审核</el-tag>
                  <el-tag v-if="scope.row['status']===2" type="info">审核不通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" header-align="center" align="center">
                <template slot-scope="scope">
                  <el-tooltip content="通过" placement="top">
                    <el-button type="success" size="small" class="bg-green" icon="el-icon-check" circle @click="toSetStatusComment(scope.row, 1)"/>
                  </el-tooltip>
                  <el-tooltip content="不通过" placement="top">
                    <el-button type="info" size="small" icon="el-icon-close" circle @click="toSetStatusComment(scope.row, 2)"/>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button type="danger" size="small" icon="el-icon-delete" circle @click="toDelete(scope.row)"/>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :page-sizes="pageSizes"
              :total="total"
              class="pagination"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" title="取消活动" width="500px" class="dialog" center @close="resetDialog('form')">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="取消原因" prop="cause">
          <el-input v-model="form.cause" type="textarea" rows="5" autofocus/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table'
export default {
  data() {
    return {
      pagePath: '',
      title: '',
      // imageUrl: this.$store.getters.serverUrl,
imageUrl: '',
      activeName: 'first',

      // 信息
      info: {},

      // 弹出框相关数据
      dialogVisible: false,
      form: {
        cause: ''
      },
      rules: {
        cause: [{ required: true, message: '请输入取消原因', trigger: 'change' }]
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 380,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: []
    }
  },
  watch: {},
  created() {
    this.pagePath = this.$route.path
    this.id = this.$route.query.id || ''
    this.getActiveDetails()
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
    getActiveDetails() {
      const url = 'activity/getActivityInfo/' + this.id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.info = res.data
        this.getData()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 面板选择
    handleClick() {
      this.currentPage = 1
      this.getData()
    },

    getData() {
      let url = ''
      if (this.activeName === 'first') {
        url = 'activity/entryList/' + this.id
      } else if (this.activeName === 'second') {
        url = 'activity/commentList'
      }
      this.tableLoading = true
      const data = {
        id: this.id,
        activityId: this.id,
        page_no: this.currentPage,
        page_size: this.pageSize
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     * 弹窗表单提交方法
     * formName: form表单中ref的值,即表单名
     */
    submitDialog(formName) {
      this.$refs[formName].validate((valid) => { // 表单验证
        if (valid) {
          const url = 'activity/cancelActivity/' + this.id
          const data = this.form
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.dialogVisible = false
            this.$message.success(res.msg)
            this.getActiveDetails()
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员!')
          })
        }
      })
    },
    /**
     * 表单查询条件重置方法,清除数据及验证信息
     * formName: form表单中ref的值,即表单名
     */
    resetDialog(formName) {
      this.$refs[formName].resetFields()
    },

    toInfo(id) {
      this.$router.push({
        path: '/activity/info',
        query: { id: id }
      })
    },

    toSetStatus(row, status) {
      const url = 'activity/verifyRefuse'
      const data = {
        id: row.id,
        status: status
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg)
        this.getData()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员!')
      })
    },

    toSetStatusComment(row, status) {
      const url = 'activity/checkComment'
      const data = {
        id: row.id,
        status: status
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg)
        this.getData()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员!')
      })
    },

    toDelete(row) {
      const url = 'activity/delComment/' + row.id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.$message.success(res.msg)
        this.getData()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员!')
      })
    },

    toModify() {
      this.$router.push({
        path: '/activity/modify',
        query: { id: this.info.id }
      })
    },

    // 导出参加人员
    toExportMember() {
      window.open(this.$store.getters.serverUrl + '/admin/activity/toExcel?token=' + this.$store.getters.token + '&id=' + this.id + '&mallId=' + this.$store.getters.SaaSId)
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > .header span {
      font-size: 18px;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
    }

    .box-2{
      @include flex-row(center, flex-start);
      .image{
        width: 375px;
        height: 200px;
      }
      .content{
        margin-left: 30px;
        .name{
          font-size: 22px;
          margin-bottom: 30px;
        }
        .tab{
          margin-bottom: 30px;
          color: #b7b7b7;
          span{
            font-weight: 500;
            font-size: 16px;
          }
        }
        .info{
          margin-bottom: 10px;
          span{
            padding-left: 30px;
            font-weight: 500;
            font-size: 16px;
          }
        }
      }
    }

    .btn-box{
      padding-left: 405px;
    }

    .box-3{
      margin-top: 60px;
      .header{
        border-bottom: 1px solid #dde0e3;
        padding-bottom: 10px;
      }
      .content{
        margin-top: 30px;
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
        .item{
          margin-bottom: 20px;
          padding: 0 10px;
          text-align: center;
          .avatar{
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .el-checkbox {
    margin-right: 30px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }

  // 标签页header背景色
  .el-tabs__nav-wrap{
    background-color: white;
  }
</style>

<style lang="scss" type="text/scss">
  @import '../../../styles/index.scss';
  .activity-tabs{
    .el-tabs__nav-wrap {
      background-color: white;
    }
    .el-tabs__item.is-active{
      color: $panGreen;
    }
    .el-tabs__item:hover{
      color: $panGreen;
    }
    .el-tabs__active-bar{
      background-color: $panGreen;
    }
  }
</style>
